<template>
   <div class="container">
     <fast-header/>
     <div class="container--titleImg"></div>
     <van-tabs @click="toggleRouteTo">
       <van-tab v-for="key in menu" :title="key.name">
       </van-tab>
     </van-tabs>
     <div class="container--content">
       <router-view></router-view>
     </div>
   </div>
</template>

<script>
  import fastHeader from '@pcpt/fast-header'
    export default {
        name: "timeSpike",
      data(){
          return{
            menu:[
              {name: '抢购中', componentName: 'timeSpikeStart', type: 'timeSpikeStart'},
              {name: '即将开抢', componentName: 'timeSpikeSoon', type: 'timeSpikeSoon'}
            ]
          }
      },
      components:{fastHeader},
      methods:{
        toggleRouteTo(key){
          /*    this.$toast(item);*/
        this.$routes.push('/root/timeSpike/'+this.menu[key].componentName);
          /*         if(this.$routes.history)*/
        }
      }
    }
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
  .container--titleImg {
    box-sizing: border-box;
    width: 100%;
    height: 296px;
    background: url("../assets/icon/flashSale.png");
    background-size: 100%;
    border: none;
  }
  .container--routerlink {
    width: 100vw;
    li {
      float: left;
      width: 50vw;
      height: 82px;
      background: #fff;
      line-height: 82px;
      text-align: center;
      font-size: 28px;
    }
  }
  .van-tabs__content {
    display: none;
  }
  .van-tabs__line {
    background-color: #196fe3;
  }
}
  .container--content{
    position: fixed;
    top: 480px;
    left: 0;
    right: 0;
    bottom: 0;
    height: inherit;
  }
</style>
